<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script src="../commonjs/vue.js"></script>
</head>
<body>
    <div id="root">
        <!--遍历一个数组 用的多-->
        <h2>人员列表</h2>
        <ul>
            <li v-for="person in persons" :key="person.id"><!--以person.id为key动态绑定-->
                {{person.name}}-{{person.age}}---{{person.id}}
            </li>
        </ul>
        <ul>
            <li v-for="(person,index) in persons" :key="index"><!--以一个自然增长的数index为key动态绑定-->
                {{person.name}}---{{person.age}}----{{index}}
            </li>
        </ul>
        <!--遍历一个对象-->
        <h2>汽车列表</h2>
        <ul>
            <li v-for="(val,key) of car" :key="key">
                {{key}}:{{val}}
            </li>
        </ul>
        <!--遍历字符串-->
        <h2>测试遍历字符串（用得少）</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{char}}--{{index}}
            </li>
        </ul>
        <!--遍历指定次数-->
        <h2>遍历指定次数（用得少）</h2>
        <ul>
            <li v-for="(value,index) of 5"><!--value是1-5数字，index是索引0-4-->
                {{value}}:{{index}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20},
                ],
                car:{
                    name:'AUDI A8L',
                    price:70.98,
                    type:'大型轿车'
                },
                str:"Hello"
            },
            methods:{

            }
        })
    </script>
</body>
</html>